<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间</title>
    <script src="./tailwindcss.min.js"></script>
    <link href="./daisyui@3.9.4.full.css" rel="stylesheet" type="text/css" />
</head>
<body class="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 flex items-center justify-center p-4">
    <div class="card w-full max-w-lg bg-white shadow-xl">
        <div class="card-body">
            <h2 class="card-title text-2xl font-bold text-gray-800 mb-4">时间工具</h2>

            <!-- 当前时间显示 -->
            <div class="bg-gray-100 rounded-lg p-4 mb-6 backdrop-blur-sm bg-opacity-70 shadow-inner">
                <div id="current-time" class="text-right text-3xl font-semibold text-gray-800 h-10">正在加载...</div>
            </div>

            <!-- 计时器 -->
            <div class="bg-gray-100 rounded-lg p-4 mb-6 backdrop-blur-sm bg-opacity-70 shadow-inner">
                <div id="timer-display" class="text-right text-3xl font-semibold text-gray-800 h-10">00:00:00</div>
                <div class="flex justify-between mt-2">
                    <button class="btn btn-primary" id="start-timer">开始</button>
                    <button class="btn btn-secondary" id="stop-timer">停止</button>
                    <button class="btn btn-accent" id="reset-timer">重置</button>
                </div>
            </div>

            <!-- 闹钟设置 -->
            <div class="bg-gray-100 rounded-lg p-4 mb-6 backdrop-blur-sm bg-opacity-70 shadow-inner">
                <input type="time" id="alarm-time" class="input input-bordered w-full mb-2">
                <button class="btn btn-primary" id="set-alarm">设置闹钟</button>
                <button class="btn btn-secondary" id="cancel-alarm">取消闹钟</button>
            </div>
        </div>
    </div>

    <script>
        // 显示当前时间
        function updateCurrentTime() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            const currentTime = `${hours}:${minutes}:${seconds}`;
            document.getElementById('current-time').textContent = currentTime;
        }
        setInterval(updateCurrentTime, 1000);
        updateCurrentTime();

        // 计时器功能
        let timerInterval;
        let timerSeconds = 0;
        const timerDisplay = document.getElementById('timer-display');
        const startTimerButton = document.getElementById('start-timer');
        const stopTimerButton = document.getElementById('stop-timer');
        const resetTimerButton = document.getElementById('reset-timer');

        function startTimer() {
            clearInterval(timerInterval);
            timerInterval = setInterval(() => {
                timerSeconds++;
                const hours = Math.floor(timerSeconds / 3600).toString().padStart(2, '0');
                const minutes = Math.floor((timerSeconds % 3600) / 60).toString().padStart(2, '0');
                const seconds = (timerSeconds % 60).toString().padStart(2, '0');
                timerDisplay.textContent = `${hours}:${minutes}:${seconds}`;
            }, 1000);
        }

        function stopTimer() {
            clearInterval(timerInterval);
        }

        function resetTimer() {
            clearInterval(timerInterval);
            timerSeconds = 0;
            timerDisplay.textContent = '00:00:00';
        }

        startTimerButton.addEventListener('click', startTimer);
        stopTimerButton.addEventListener('click', stopTimer);
        resetTimerButton.addEventListener('click', resetTimer);

        // 闹钟功能
        let alarmInterval;
        const alarmTimeInput = document.getElementById('alarm-time');
        const setAlarmButton = document.getElementById('set-alarm');
        const cancelAlarmButton = document.getElementById('cancel-alarm');

        function setAlarm() {
            const alarmTime = alarmTimeInput.value;
            if (alarmTime) {
                const now = new Date();
                const [hours, minutes] = alarmTime.split(':');
                const alarm = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes, 0);
                if (alarm < now) {
                    alarm.setDate(alarm.getDate() + 1);
                }
                const timeUntilAlarm = alarm - now;
                clearInterval(alarmInterval);
                alarmInterval = setTimeout(() => {
                    alert('闹钟响了！');
                }, timeUntilAlarm);
            }
        }

        function cancelAlarm() {
            clearInterval(alarmInterval);
        }

        setAlarmButton.addEventListener('click', setAlarm);
        cancelAlarmButton.addEventListener('click', cancelAlarm);
    </script>
</body>
</html>